import React, { useState } from 'react'

// 自己封装一个hook，名字以use开头，也是一个函数，有返回值
const useInputVal = () => {
  // 先调用useState声明变量
  const [val, setVal] = useState('');
  // 返回值是对应的变量和修改变量的方法
  return {
    val: val,
    onChange: (e) => setVal(e.target.value)
  }
}
export default function LoginHook() {
  // 调用自己的hook，生成用户名和密码对应的变量
  const { val: rename, ...setName } = useInputVal('')
  const { val: repwd, ...setPwd } = useInputVal('')
  const login = () => {
    console.log(rename);
    console.log(repwd);
  }
  return (
    <div>
      <p>登录页</p>
      <div>
        <span>用户名：</span>
        <input {...setName}></input>
      </div>
      <div>
        <span>密码：</span>
        <input {...setPwd}></input>
      </div>
      <button onClick={() => login()}>登录</button>
    </div>
  )
}
